<template>
  <div>
    
    <div class="noorder" v-if="a"></div>
  <div class="itm" id="b">
    <!-- <div class="manin"><Tilt></Tilt> -->
    <div class="details" v-for="(item, idex) in dele" :key="idex">
      <img class="deim" src="../assets/01.webp" alt="" />&nbsp; 幸运女孩手作的店
      > <span class="shipped">{{ item.ostatus }}</span
      ><br />
      <div class="deta_2">
        <img class="deim2" src="../assets/01.webp" alt="" />
        <div class="deta_2_1">
          <span style="width: 50px">{{ item.goodsname }}</span>
          <span class="price">￥{{ item.goodsprice }}</span>
          <br />
          <span class="design"
            >{{ item.size }}&nbsp;{{ item.colour }}&nbsp;{{ item.model }}</span
          ><span class="pcs">x1</span>
          <br />
          <span class="sek"> 7天无理由退货 </span>
          <span class="sek"> 晚发必赔 </span>
        </div>
        <div class="deta_2_2">
          <div class="deta_2_2_1">
            <span>
              <img src="../assets/car.png" alt="" />&nbsp;
              <span>配送信息</span>
            </span>

            <span class="deta_2_2_1_1">全款预售,付款后五天内发货</span>
          </div>
          <div class="deta_2_2_2" v-if="item.ostatus == '待付款'">
            <span class="deta_2_2_1_1">共1件</span>
            <span >待付 ${{ item.goodsprice }}</span>
          </div>
        </div>
        <!--  -->
        <div class="paly">
          <span class="paly_1" v-if="item.ostatus == '待付款'">
            <button class="delivery1" @click="amend">修改地址</button>
            <button class="delivery2" @click="pal">立即支付29:14</button>
          </span>
          <span class="paly_2" v-if="item.ostatus == '待收货'">
            <div class="more">更多</div>
            <div class="delivery2_">
              <button class="delivery2_1">申请退款</button>
              <button class="delivery2_1">我要催单</button>
              <button class="delivery2_1">确认收货</button>
            </div>
          </span>
          <span class="paly_3" v-if="item.ostatus == '待发货'">
            <button class="delivery2_3">催发货</button>
          </span>
          <span class="paly_4" v-if="item.ostatus == '订单失效'">
            <button class="delivery2" id="dele" @click="delet(dele[idex].ordernum)">删除订单</button>
          </span>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import { Order,deletr } from "@/api/Orde";
export default {
  data() {
    return {
      dele: [],
      a: true,
      phone:''
    };
  },
  mounted() {
    this.Ord();
  },
  methods: {
    Ord() {
      // 用户uid
      // let data = JSON.parse(localStorage.getItem("userid"));
      // 用户手机号
      let data = JSON.parse(localStorage.getItem("userphone"));
      this.phone =  data+'';
      Order({
        phonenum: this.phone,
      }).then((res) => {
        this.dele = res.result;
        console.log(23);
        console.log(this.dele);
        if (this.dele == '') {
          console.log(12333);
          this.a = true
        } else if (this.dele !== '') {
          console.log(321);
          this.a = false
        }
        // this.or();
      });
    },
    amend() {
      this.$router.push('/Amend')
      console.log(1);
    },
    pal() {
      this.$router.push('/Orderpayment')
      console.log(54);
    },
    delet(e) {
      console.log(e);
      let a = e
      // console.log(ordernum);
      deletr({
        ordernum:a
      }).then(res => {
        // console.log(res);
        this.Ord();
        // console.log(ordernum);
      })
    }
  },
};
</script>
<style scoped>
.noorder {
  width: 400px;
  height: 180px;
  /* background: #000; */
  background-image: url(../assets/noorder.jpg);
  background-repeat: no-repeat;
  background-size: contain;
}
.manin {
  margin-top: 15px;
  padding-top: 10px;
  background-color: rgba(191, 191, 191, 0.26);
}

.details {
  width: 350px;
  /* height: 400px; */
  background-color: white;
  margin: 10px auto;
  font-size: 14px;
  padding: 15px;
  box-sizing: border-box;
  position: relative;
  border-radius: 10px;
}

.details a {
  line-height: 0px;
  color: black;
  font-weight: 600;
}

.shipped {
  color: rgb(180, 0, 0);
  position: absolute;
  right: 15px;
  font-weight: 600;
}

.price {
  position: absolute;
  top: 0px;
  right: -50px;
}

.pcs {
  position: absolute;
  top: 20px;
  right: -50px;
  color: silver;
}

.deim {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.deim2 {
  width: 90px;
  height: 90px;
  margin-right: 5px;
  border-radius: 10px;
}

.deta_2 {
  margin-top: 15px;
  position: relative;
}

.deta_2_1 {
  width: 160px;
  position: absolute;
  top: 0;
  margin-left: 10px;
  display: inline-block;
}

.design {
  margin-top: 15px;
  font-size: 10px;
  color: rgb(160, 160, 160);
}

.sek {
  /* font-size: 8px !important; */
  transform: scale(0.7);
  margin-top: 8px;
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid silver;
  margin-left: -15px;
}

.deta_2_2 {
  font-size: 12px;
  margin-left: 10px;
  margin-top: 20px;
}

.deta_2_2 img {
  width: 10px;
  height: 10px;
}

.deta_2_2_1 {
  display: flex;
  justify-content: space-between;
}

/* 最晚发货事件 */
.deta_2_2_1_1 {
  color: silver;
}

.deta_2_2_2 {
  margin-bottom: 10px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.delivery2 {
  /* width: 80px; */
  padding: 5px 13px;
  height: 40px;
  text-align: center;
  font-size: 14px;
  line-height: 30px;
  border-radius: 30px;
  border: 1px solid rgb(211, 211, 211);
  background-color: white;
  display: flex;
  /* flex-direction: row-reverse  */
  /* position: absolute;
  right: 15px;
  bottom: 10px; */
}
.delivery2_3 {
  padding: 5px 13px;
  height: 40px;
  text-align: center;
  font-size: 14px;
  line-height: 30px;
  border-radius: 30px;
  border: 1px solid rgb(211, 211, 211);
  background-color: white;
  display: flex;
  flex-direction: row-reverse;
}
.delivery1 {
  /* width: 80px; */
  padding: 5px 13px;
  height: 40px;
  text-align: center;
  font-size: 14px;
  line-height: 30px;
  border-radius: 30px;
  border: 1px solid rgb(211, 211, 211);
  /* display: flex; */
  /* position: absolute;
  right: 140px;
  bottom: 10px; */
}
.delivery2_1 {
  padding: 0px 13px;
  /* height: 30px; */
  text-align: center;
  font-size: 12px;
  line-height: 30px;
  border-radius: 30px;
  border: 1px solid rgb(211, 211, 211);
  background-color: white;

  /* position: absolute; */
  /* top: 10px; */
}
.delivery2_1:nth-child(3) {
  border: 1px solid brown;
  color: brown;
}
.delivery2_ {
  /* position: absolute;
  top: -5px;
  right: 0; */
}
.paly {
  /* background: red; */
  /* display: flex;
  justify-content: space-between; */
}
.paly_1 {
  display: flex;
  justify-content: flex-end;
}
.paly_2 {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.paly_3 {
  display: flex;
  justify-content: flex-end;
}
.paly_4 {
  display: flex;
  justify-content: flex-end;
}
</style>